<template>
  <div class="external-personnel">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>外部人员</span>
      </div>

      <QuerySearch :formConfigurationItem="searchTable">
        <!-- 按钮插槽 -->
        <template v-slot:btn="slotProps">
          <div class="btn-box">
            <el-button>重置</el-button>
            <el-button type="primary" @click="searchBtn(slotProps.data)">搜索</el-button>
          </div>
        </template>
      </QuerySearch>

      <div class="student-table">
        <QueryTable
          :tableConfiguration="tableConfiguration"
          :displayContent="displayContent"
          :formData="formData"
          ref="queryTable"
        >
          <template v-slot:btn="{ scope }">
            <el-button type="primary">权限管理</el-button>
            <el-button type="primary">通行记录</el-button>
          </template>
        </QueryTable>
      </div>
    </el-card>
  </div>
</template>

<script>
import QueryTable from '@/components/queryTable/index.vue';
import QuerySearch from '@/components/querySearch/index.vue';

export default {
  components: {
    QueryTable,
    QuerySearch
  },
  data() {
    return {
      //配置文件
      displayContent: {
        height: '57vh',
        indexFixed: true,
        selectionFixed: true,
        selection: false,
        index: true,
        paginationShow: true
      },
      formData: {}, //传给后端的参数
      tableConfiguration: [
        {
          prop: 'a1',
          label: '姓名',
          width: '260',
          //   showOverflowTooltip: true,
          align: 'center'
        },
        {
          prop: 'a2',
          label: '手机号',
          width: '260',
          align: 'center'
        },
        {
          prop: 'a3',
          label: '身份',
          width: '260',
          align: 'center'
        },
        {
          prop: 'a4',
          label: '人脸照片',
          width: '260',
          align: 'center'
        },
        {
          prop: 'a5',
          label: '申请原因',
          width: '260',
          align: 'center'
        },
        {
          prop: 'a5',
          label: '申请地点',
          width: '260',
          align: 'center'
        },
        {
          label: '操作',
          prop: 'btn',
          width: '220px',
          align: 'center',
          fixed: 'right',
          sockets: true
        }
      ],
      //搜索列表配置
      searchTable: [
        {
          span: 4,
          type: 'input',
          placeholder: '注册手机号',
          value: 'xm'
        },
        {
          span: 20,
          type: 'btn'
        }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //搜索按钮
    searchBtn(val) {
      console.log(val);
      this.formData = val;
    }
  }
};
</script>

<style lang="scss" scoped>
.external-personnel {
  width: 100%;

  box-sizing: border-box;
  padding: 10px;

  .student-table {
    margin-top: 15px;
  }

  .btn-box {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
